<template>
	<uni-popup ref="popup" type="right">
		<view class="con">
			<view class="con_view">
				<SelectUser ref="selectUserRef" />
			</view>
			<view class="con_but">
				<view class="con_but_action">
					<view class="con_but_action_btn">
						<button @click="cancel" size="mini">取消</button>
					</view>
					<view class="con_but_action_btn">
						<button @click="confirm" type="default"  class="cus_button" size="mini">确定</button>
					</view>
					<view class="con_but_action_btn">
						<slot name="but"></slot>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import SelectUser from './SelectUser.vue'
	export default {
		components: {
			SelectUser
		},
		props: {
			type: {
				type: [String, Number],
				default: 0, //0 是多选 1是只选一个
			}
		},
		data() {
			return {
				hadUsers: []

			}
		},
		methods: {
			open(record = {}) {
				console.log("open", record)
				this.$refs.popup.open()
				if (record.users && record.users.length) {
					this.hadUsers = record.users
				}
				console.log("this.hadUsers", this.hadUsers)
			},
			close() {
				this.$refs.selectUserRef.clear()
				this.$refs.popup.close()
			},
			confirm() {
				let selectUserList = this.$refs.selectUserRef.selectUserList
				if (selectUserList && selectUserList.length) {
					if (this.type == 1 && selectUserList.length > 1) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: '只能选择一个用户',
						});
						return
					}
					const keys = this.hadUsers.map(item => item.key)
					selectUserList = selectUserList.filter(item => !keys.includes(item.key))
					const value = selectUserList.map(item => item.key).join(',')
					const label = selectUserList.map(item => item.title).join(',')
					this.$emit('confirm', {
						selectUserList,
						value,
						label
					})
					this.close()
				} else {
					uni.showToast({
						icon: "none",
						mask: true,
						title: '请选择用户',
					});
				}
			},
			cancel() {
				this.close()
				this.$emit('cancel')
			},
		}
	}
</script>

<style scoped>
	.con {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 100vw;
	}

	.con_view {
		flex: 1;
		overflow-y: hidden;
	}

	.con_but {
		height: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.con_but_action {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.con_but_action_btn{
		display: flex;
	}
</style>